<template>
  <el-table
    @row-contextmenu="rightClick"
    :header-cell-style="{ 'text-align': 'center' }"
    :data="uploadQueue"
    style="width: 100%"
    height="100%"
  >
    <el-table-column width="38">
      <template slot-scope="scope">
        <i class="icon" :class="getSuffix(scope.row.filename)"></i>
      </template>
    </el-table-column>
    <el-table-column label="文件名" show-overflow-tooltip align="left">
      <template slot-scope="scope">
        <span>{{ scope.row.filename }}</span>
      </template>
    </el-table-column>
    <el-table-column label="上传进度" align="center">
      <template slot-scope="scope">
        <el-progress
          :percentage="
            parseInt(
              ((scope.row.uploadedChunkNum / scope.row.chunkNum) * 100).toFixed(
                0
              )
            )
          "
        ></el-progress>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { uploadStatus, uploadEnum } from "@/bus/uploadHandler";
import { mapActions, mapGetters } from "vuex";
import store from "@/store";
export default {
  name: "Upload",
  data() {
    return { types: ["zip", "mp3", "mp4"] };
  },
  computed: {
    ...mapGetters(["uploadQueue"]),
    uploadStatus: { get: () => uploadStatus },
    uploadEnum: { get: () => uploadEnum }
  },
  mounted() {
    const p = this;
    this.$bus.$on("startQueue", function() {
      if (p.$options.name === p.$router.currentRoute.name) {
        this.$bus.$emit("startUploadQueue");
      }
    });

    this.$bus.$on("pauseQueue", function() {
      if (p.$options.name === p.$router.currentRoute.name) {
        this.$bus.$emit("stopUploadQueue");
      }
    });

    this.$bus.$on("clearQueue", function() {
      if (p.$options.name === p.$router.currentRoute.name) {
        store.commit("CLEAR_UPLOAD_QUEUE");
      }
    });
  },
  destroyed() {
    this.$bus.$off(["startQueue", "pauseQueue", "clearQueue"]);
  },
  methods: {
    ...mapActions(["deleteUploadQueueElement"]),
    rightClick(row, column, event) {
      this.$contextmenu({
        items: [
          {
            label: "删除",
            onClick: () => {
              this.deleteUploadQueueElement(row);
            }
          }
        ],
        event,
        zIndex: 3,
        minWidth: 140
      });
    },
    getSuffix(filename) {
      const suffix = filename
        .split(".")
        .slice(-1)
        .pop();
      return this.types.indexOf(suffix) > 0 ? suffix : "misc";
    }
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: no-repeat 100% 100%;
  background-size: cover;
  flex-shrink: 0;
}
.dir {
  background-image: url("../../static/icons/folder.png");
}
.zip {
  background-image: url("../../static/icons/zip.png");
}
.misc {
  background-image: url("../../static/icons/misc.png");
}
.mp3 {
  background-image: url("../../static/icons/music.png");
}
.jpg {
  background-image: url("../../static/icons/jpg.png");
}
.mp4 {
  background-image: url("../../static/icons/video.png");
}
.txt {
  background-image: url("../../static/icons/txt.svg");
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
